<template>
	<section class="main_" v-loading="loading">
		<!--工具条-->
		<el-col :span="23" class="main_" >
			<el-form :inline="true" >
				<el-form-item>
					<el-input size="small" v-model="search.userName" placeholder="负责人" @keyup.enter.native="initList" clearable ></el-input>
				</el-form-item>
        <el-form-item>
					<el-input size="small" v-model="search.shopName" placeholder="店铺名称" @keyup.enter.native="initList" clearable ></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" size="small" @click="initList" >查询</el-button>
				</el-form-item>
			</el-form>
		</el-col>

    <el-table :data="tableData" stripe >
			<el-table-column type="index" width="50"></el-table-column>
      <el-table-column label="门头图片" >
        <template slot-scope="scope">
          <img v-if="scope.row.banner" :src="scope.row.banner" class="img_">
          <img v-else src="static/img/null.png" class="img_">
        </template>
      </el-table-column>
      <el-table-column prop="shopName" label="门店名称" ></el-table-column>
      <el-table-column prop="userName" label="负责人" ></el-table-column>
      <el-table-column prop="address" label="地址" ></el-table-column>
      <el-table-column align="center" label="功能" >
				<template slot-scope="scope">
					<el-button size="mini" @click="openBanner(scope.row.banner)">查看</el-button>
					<el-button type="danger" size="mini" @click="delShop(scope.row._id)">删除</el-button>
				</template>
			</el-table-column>
    </el-table>
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[ 10, 20 , 30]"
      :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="page.count">
    </el-pagination>

    <el-dialog title="门头图片" :visible.sync="shopDialog.isShow" top="50px" >
      <img :src="shopDialog.banner" alt="" style="width : 100% ; height : 100%">
    </el-dialog>

	</section>
</template>

<script>
	export default {
		data() {
			return {
        loading : false ,
        tableData : [],
        search : {} ,
        page : { skip : 0 ,limit : 10 ,count : 0},
        shopDialog : { isShow : false, banner : '' }
			}
		},
		methods: {
      openBanner : function (res) {//查看大图
        this.shopDialog.banner = res ;
        this.shopDialog.isShow = true ;
      },
      delShop : function (res) {//调用删除门店接口
        this.$confirm('此操作会将商店从系统中移除, 是否继续?', '提示', {
          	confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'
				}).then(() => {
					this.loading = true ;
					this.$http.post('/api/admin/delShopById',{_id : res }).then(res => {
						this.loading = false ;
						let result = res.data ;
						if(result.code == 100){
							this.$message({
								type: 'success',
								message: '删除成功!'
							});
						}
						this.initList();
					})
				});
      },
      handleCurrentChange: function(res) {
					if (res == 1)
							this.page.skip = 0;
					else
							this.page.skip = (res - 1) * this.page.limit
					this.initList();
			},
			handleSizeChange: function(res) {
					this.page.limit = res;
					this.initList();
			},
      initList : function () {
        this.loading = true ;
        this.$http.post("/api/admin/queryShopList",{search :this.search  , page : this.page}).then( res => {
          this.loading = false ;
          let result = res.data ;
          if(result.code == 100 ){
            this.tableData = result.data ;
            this.page.count = result.count ;
          }
        })
      }
		},
		created() {
      this.initList();
		}
		
	}

</script>

<style scoped lang="scss">
.main_ {
  margin: {
    top: 5px;
    left: 5px;
  }
}
.img_ {
  width: 100px;
  height: 70px;
}
</style>